<template>
  <!-- <List item-layout="vertical" :class="prefixCls">
    <template v-for="(item, index) in articleList" :key="item.title">
      <ListItem class="list-item" v-slide-in @click="onClick(item)">
        <ListItemMeta>
          <template #description>
            <div :class="['footer', index % 2 === 0 ? 'even' : 'odd']">
              <div :class="`${prefixCls}__content`">
                {{ item.context }}
              </div>
              <div class="img">
                <img width="100px" :src="`${getPhotoUrl}${item.dataId}`" alt="" />
              </div>
            </div>
          </template>
          <template #title>
            <p :class="`${prefixCls}__title`">
              {{ item.title }}
            </p>
            <div>
              <template v-for="tag in ['HIIT', '力量', '高强度']" :key="tag">
                <Tag class="mb-2">
                  {{ tag }}
                </Tag>
              </template>
            </div>
          </template>
        </ListItemMeta>
        <div :class="['footer', index % 2 === 0 ? 'even' : 'odd']">
          <div class="action">
            <template v-for="action in actions" :key="action.text">
              <div :class="`${prefixCls}__action`">
                <Icon
                  v-if="action.icon"
                  :class="`${prefixCls}__action-icon`"
                  :icon="action.icon"
                  :color="action.color"
                />
                {{ action.text }}
              </div>
            </template>
          </div>
          <div :class="`${prefixCls}__time`">{{ '2020-11-14 11:20' }}</div>
        </div>
      </ListItem>
    </template>
  </List> -->
  <List :class="prefixCls">
    <Row :gutter="16">
      <template v-for="item in articleList" :key="item.title">
        <Col :span="6">
          <ListItem class="list-item" v-slide-in @click="onClick(item)">
            <Card :hoverable="true" :class="`${prefixCls}__card`">
              <div :class="`${prefixCls}__card-title`">
                <!-- <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" /> -->
                {{ item.title }}
              </div>
              <div>
                <img class="img" :src="`${getPhotoUrl}${item.dataId}`" alt="" />
              </div>
            </Card>
          </ListItem>
        </Col>
      </template>
    </Row>
  </List>
  <Drawer @register="register" />
</template>
<script lang="ts" setup>
  import { List, Tag, Card, Row, Col } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { actions } from './data';
  import { ref, onMounted } from 'vue';
  import { planPageApi } from '@/api/jiankang/plan';
  import { getAuthCache } from '@/utils/auth';
  import { USER_INFO_KEY } from '@/enums/cacheEnum';
  import { getPhotoUrl } from '@/api/sys/upload';
  import { useMessage } from '@/hooks/web/useMessage';
  import Drawer from './components/Drawer.vue';
  import { useDrawer } from '@/components/Drawer';

  const userInfo: any = getAuthCache(USER_INFO_KEY);
  const { createMessage } = useMessage();

  const ListItem = List.Item;
  const ListItemMeta = List.Item.Meta;

  const prefixCls = 'account-center-article';
  const [register, { openDrawer, setDrawerProps }] = useDrawer();
  const articleList = ref([]);

  async function getPlanPageData() {
    const { records } = await planPageApi({ current: 1, size: 200, uid: userInfo.id });
    articleList.value = records;
  }

  onMounted(() => {
    getPlanPageData();
  });
  function onClick(data) {
    openDrawer(true, { data });
    setDrawerProps({ loading: true });
    setTimeout(() => {
      setDrawerProps({ loading: false });
    }, 500);
  }
</script>
<style lang="less">
  .account-center-article {
    &__card {
      width: 100%;
      margin-bottom: -12px;

      .ant-card-body {
        padding: 16px;
      }

      &-title {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 500;

        .icon {
          margin-top: -5px;
          font-size: 22px;
        }
      }

      &-num {
        margin-left: 24px;
        color: @text-color-secondary;
        line-height: 36px;

        span {
          margin-left: 5px;
          font-size: 18px;
        }
      }

      &-download {
        float: right;
        color: @primary-color;
        font-size: 20px !important;
      }
    }
    .img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
  }
</style>
